<template>
    <el-container>
        <el-header>
            <div class="left-panel">
            </div>
            <div class="right-panel">
                <div class="right-panel-search" style="flex-wrap:wrap;">
                    <el-date-picker v-model="search.all_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px" :shortcuts="shortcuts" />
                    <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh">重置</el-button>
                    <el-button type="primary" icon="el-icon-ScaleToOriginal" @click="screen">全屏</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="screen panel-item hidden-sm-and-down" id="screen" style="background: #fff;">
            <el-row :gutter="1">
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row">
                        <template #header>
                            <div class="card-header">
                                <span>场次数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.count}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row">
                        <template #header>
                            <div class="card-header">
                                <span>已完结数量</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.end}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row" @click="showProject(1)">
                        <template #header>
                            <div class="card-header">
                                <span>未举办数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.notend}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" style="cursor: pointer;">
                        <template #header>
                            <div class="card-header">
                                <span>总销售额</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.oneall}}</div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row" @click="showCost(2)">
                        <template #header>
                            <div class="card-header">
                                <span>未提交成本单数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.comment_not}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row" @click="showRece(2)">
                        <template #header>
                            <div class="card-header">
                                <span>已回款数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.collect_all}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="el-card-row" @click="showRece(1)">
                        <template #header>
                            <div class="card-header">
                                <span>未回款数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.collect_not}}</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" @click="showHotel(5)" style="cursor: pointer;">
                        <template #header>
                            <div class="card-header">
                                <span>预售权未退款数</span>
                            </div>
                        </template>
                        <div style="text-align: center;font-size:36px;">{{data.presale}}</div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card" style="margin-right:10px">
                        <template #header>
                            <div class="card-header">
                                <span>回款比例</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="cakeBack"></scEcharts>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>酒店比例</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="cakeHotel"></scEcharts>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card" style="margin-right:10px">
                        <template #header>
                            <div class="card-header">
                                <span>活动类型比例</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="cakeActive"></scEcharts>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>利润达标比例</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="cakeProfit"></scEcharts>
                    </el-card>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card" style="margin-right:10px">
                        <template #header>
                            <div class="card-header">
                                <span>单量趋势</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="lineOnly"></scEcharts>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>业绩趋势</span>
                            </div>
                        </template>
                        <scEcharts height="250px" :option="lineAll"></scEcharts>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable :query="query"></save-dialog>
    <hotel v-if="dialog.hotel" ref="hotelDialog" @success="handleSuccess" @closed="dialog.hotel = false" draggable :query="{pre_status:0,all_date:this.search.all_date}"></hotel>
    <rece-list v-if="dialog.rece" ref="receDialog" @success="handleSuccess" @closed="dialog.rece = false" draggable :query="{collect_status_now:this.receType,all_date:this.search.all_date}"></rece-list>
</template>

<script>
import ReceList from '../project/receivable/receList.vue';
import Hotel from './hotel.vue';
import saveDialog from './project.vue';

export default {
    components: { saveDialog, Hotel, ReceList },
	data() {
		return {
            search:{
                all_date:null,
            },
            cakeBack : {
                title: {
                    // text: 'Referer of a Website',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '60%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        label: {
                            show: true,
                            position: 'outside', // 设置数据和百分比显示在外部
                            formatter: '{b}: {c} ({d}%)' // 显示格式，{b}是数据名，{c}是数据值，{d}是百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#5470c6','#91cc75','#fac858','#ee6666','#73c0de'
                                    ];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }
                    }
                ]
            },
            cakeHotel : {
                title: {
                    // text: 'Referer of a Website',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '60%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        label: {
                            show: true,
                            position: 'outside', // 设置数据和百分比显示在外部
                            formatter: '{b}: {c} ({d}%)' // 显示格式，{b}是数据名，{c}是数据值，{d}是百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#5470c6','#91cc75','#fac858','#ee6666','#73c0de'
                                    ];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }
                    }
                ]
            },
            cakeActive : {
                title: {
                    // text: 'Referer of a Website',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '60%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        label: {
                            show: true,
                            position: 'outside', // 设置数据和百分比显示在外部
                            formatter: '{b}: {c} ({d}%)' // 显示格式，{b}是数据名，{c}是数据值，{d}是百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#5470c6','#91cc75','#fac858','#ee6666','#73c0de'
                                    ];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }
                    }
                ]
            },
            cakeProfit : {
                title: {
                    // text: 'Referer of a Website',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: '60%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        label: {
                            show: true,
                            position: 'outside', // 设置数据和百分比显示在外部
                            formatter: '{b}: {c} ({d}%)' // 显示格式，{b}是数据名，{c}是数据值，{d}是百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#5470c6','#91cc75','#fac858','#ee6666','#73c0de'
                                    ];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }
                    }
                ]
            },
            lineOnly : {
                title: {
                    // text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['记录数量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '记录数量',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                ]
            },
            lineAll : {
                title: {
                    // text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['项目总价']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '项目总价',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                ]
            },
            shortcuts:[
                {
                    text:'本周',
                    value: () => {
                        const now = new Date();
                        const dayOfWeek = now.getDay(); // 0 表示周日，1 表示周一，以此类推
                        const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - dayOfWeek + 1);
                        const end = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (7 - dayOfWeek));
                        return [start, end]
                    },
                },
                {
                    text:'本月',
                    value: () => {
                        const now = new Date();
                        const start = new Date(now.getFullYear(), now.getMonth(), 1);
                        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
                        return [start, end];
                    },
                },
                {
                    text:'本季度',
                    value: () => {
                        const now = new Date();
                        const currentMonth = now.getMonth();
                        const startMonth = Math.floor(currentMonth / 3) * 3;
                        const endMonth = startMonth + 2;
                        const startOfQuarter = new Date(now.getFullYear(), startMonth, 1);
                        const endOfQuarter = new Date(now.getFullYear(), endMonth + 1, 0);
                        return [startOfQuarter, endOfQuarter];
                    },
                },
                {
                    text:'半年',
                    value: () => {
                        const now = new Date();
                        const currentMonth = now.getMonth();
                        const startMonth = currentMonth < 6 ? 0 : 6;
                        const endMonth = startMonth + 5;
                        const startOfHalfYear = new Date(now.getFullYear(), startMonth, 1);
                        const endOfHalfYear = new Date(now.getFullYear(), endMonth + 1, 0);
                        return [startOfHalfYear, endOfHalfYear];
                    },
                },
                {
                    text:'本年',
                    value: () => {
                        const now = new Date();
                        const start = new Date(now.getFullYear(), 0, 1);
                        const end = new Date(now.getFullYear(), 11, 31);
                        return [start, end];
                    },
                },
                {
                    text:'上周',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: '上月',
                    value: () => {
                        const now = new Date();
                        const startOfLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                        const endOfLastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
                        return [startOfLastMonth, endOfLastMonth];
                    },
                },
                {
                    text:'上季度',
                    value: () => {
                        const now = new Date();
                        const currentMonth = now.getMonth();
                        const startMonth = Math.floor(currentMonth / 3) * 3;
                        const lastQuarterStartMonth = startMonth - 3;
                        const lastQuarterEndMonth = startMonth - 1;
                        const startOfLastQuarter = new Date(now.getFullYear(), lastQuarterStartMonth, 1);
                        const endOfLastQuarter = new Date(now.getFullYear(), lastQuarterEndMonth + 1, 0);
                        return [startOfLastQuarter, endOfLastQuarter];
                    },
                },
                {
                    text:'去年',
                    value: () => {
                        const now = new Date();
                        const startOfLastYear = new Date(now.getFullYear() - 1, 0, 1);
                        const endOfLastYear = new Date(now.getFullYear() - 1, 11, 31);
                        return [startOfLastYear, endOfLastYear];
                    },
                },
            ],
            data:{},
            dialog:{
                save:false,
                hotel:false,
                rece:false,
            },
            type:"",
            receType:"",
            query:{},
		}
	},
    mounted () {
        this.getData();
    },
	methods: {
        async getData() {
            var res = await this.$API.system.echarts.get(this.search);
            this.data = res.data
            this.cakeBack.series[0].data = res.data.collect_accent
            this.cakeHotel.series[0].data = res.data.hotel
            this.cakeActive.series[0].data = res.data.active
            this.cakeProfit.series[0].data = res.data.profit
            let onlyX = []
            let onlyY = []
            res.data.project_all.map(item=>{
                onlyX.push(item.name)
                onlyY.push(item.value)
            })
            this.lineOnly.xAxis.data = onlyX
            this.lineOnly.series[0].data = onlyY
            let allX = []
            let allY = []
            res.data.project_total.map(item=>{
                allX.push(item.name)
                allY.push(item.value)
            })
            this.lineAll.xAxis.data = allX
            this.lineAll.series[0].data = allY
        },
        refresh(){
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.getData()
        },
        // 放大全屏
        screen() {
            this.$TOOL.screen(document.getElementById('screen'))
        },
        showProject(e){
            this.query = {project_date:e,all_date:this.search.all_date}
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
        },
        showHotel(){
            this.dialog.hotel = true
			this.$nextTick(() => {
				this.$refs.hotelDialog.open('add')
			})
        },
        showCost(){
            this.query = {not_export:2,all_date:this.search.all_date}
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
        },
        showRece(e){
            this.receType = e
            this.dialog.rece = true
			this.$nextTick(() => {
				this.$refs.receDialog.open('add')
			})
        },
	}
}
</script>

<style scoped lang="scss">
.card-header{
    font-size: 16px;
}
.el-card-row{
    margin-right: 10px;
    cursor: pointer;
}
::v-deep .el-card__body {
  padding-top: 10px;
}
</style>
